<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>库存管理</title>
    <link rel="stylesheet" href="../../bootstrap/css/bootstrap.css">
    <script src="../../jquery/jquery-3.4.1.min.js"></script>
    <script src="../../bootstrap/js/bootstrap.js"></script>
    <link rel="stylesheet" href="../../bootstrap-table/bootstrap-table.css">
    <script src="../../bootstrap-table/bootstrap-table.js"></script>
    <script src="../../bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
    <link rel="stylesheet" href="../../font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="../../toastr/toastr.min.css">
    <script src="../../toastr/toastr.min.js"></script>

</head>
<body class="container-fluid">
<style>
    ::-webkit-scrollbar {display:none}
</style>
<div style=" width:0px;   height: 0px;  overflow-y: scroll;">
</div>

<!--bootstrap表-->
<div class="row">
    <div class="col-md-12" id="myTable"></div>
</div>

</div>

<script>

    var c_ids=[];

    $(document).ready(function () {
        initTable();

        //当模态框关闭时，清空模态框数据
        $('#myDialog').on('hidden.bs.modal', function () {
            clearModelData();
        });

        $("#addBtn").click(function () {
            $("#c_id").val("");
            $("#myDialog").modal("show");
            showModal();
        });

        $("#updateBtn").click(function ()   {
            var c_id=$("#c_id").val();
            if(c_id==""){
                $.ajax({
                    url: "../../car/insertCar",
                    type: "post",
                    dataType: "json",
                    data: {
                        c_name: $("#c_name").val(),
                        c_displacement: $("#c_displacement").val(),
                        c_gearbox: $("#c_gearbox").val(),
                        c_structure: $("#c_structure").val(),
                        c_braking:$("#c_braking").val(),
                        c_maxpower:$("#c_maxpower").val(),
                        c_maxtorque:$("#c_maxtorque").val(),
                        c_maxhorsepower:$("#c_maxhorsepower").val(),
                        c_brand_id:$("#c_brand").val(),
                        c_drive_id:$("#c_drive").val(),
                        c_inflow_id:$("#c_inflow").val(),
                        c_type_id:$("#c_type").val(),
                    },
                    success: function (result) {
                        if (result.errorCode == 0) {
                            $("#myDialog").modal("hide");
                            initTable();
                            toastr.success(result.status);
                        }
                    }
                });
            }else{
                $.ajax({
                    url: "../../car/updateCar",
                    type: "post",
                    dataType: "json",
                    data: {
                        c_id:$("#c_id").val(),
                        c_name: $("#c_name").val(),
                        c_displacement: $("#c_displacement").val(),
                        c_gearbox: $("#c_gearbox").val(),
                        c_structure: $("#c_structure").val(),
                        c_braking:$("#c_braking").val(),
                        c_maxpower:$("#c_maxpower").val(),
                        c_maxtorque:$("#c_maxtorque").val(),
                        c_maxhorsepower:$("#c_maxhorsepower").val(),
                        c_brand_id:$("#c_brand").val(),
                        c_drive_id:$("#c_drive").val(),
                        c_inflow_id:$("#c_inflow").val(),
                        c_type_id:$("#c_type").val(),
                    },
                    success: function (result) {
                        if (result.errorCode == 0) {
                            $("#myDialog").modal("hide");
                            initTable();
                            toastr.success(result.status);
                        }
                    }
                });
                //添加图片
                //    批量上传图片，第一位封面图片
                //     $(".files")
                var formData = new FormData();
                // var files = $('.files').prop('files');
                $(".files").each(function () {
                    console.log(this.files[0]);
                    formData.append('files', this.files[0]);
                })
                console.log(formData);
                // formData.append('files', $('#surfaceFile')[0].files[0]);
                // formData.append('files', $('#img1')[0].files[0]);
                formData.append('c_id',c_id);
                // formData.append('info',$("#info").val());

                // console.log(files);
                // data.append('avatar', files[0]);

                $.ajax({
                    url: '../../car/upload',
                    type: 'POST',
                    data: formData,
                    /**
                     *必须false才会自动加上正确的Content-Type
                     */
                    contentType: false,
                    /**
                     * 必须false才会避开jQuery对 formdata 的默认处理
                     * XMLHttpRequest会对 formdata 进行正确的处理
                     */
                    processData: false,
                    success: function (res) {
                        console.log(res);
                        if(res.errorCode==0){
                            alert("图片已更新")
                        }else{
                            alert("数据已更新");
                        }
                    }
                });

            }

        });

        $("#deleteBtn").click(function () {
            $.ajax({
                url:"../../car/delete",
                type:"get",
                dataType:"json",
                traditional: true,
                data:{
                    c_ids:c_ids
                },
                success:function (result) {
                    // alert(JSON.stringify(result));
                    var errorCose=result.errorCode;
                    if(errorCose==0){
                        //模态框隐藏
                        $("#myDeleteModal").modal("hide");
                        initTable();
                        toastr.success(result.status);
                    }
                }
            });
        });

        $("#deleteMoreBtn").click(function () {
            //    获取所有被选中的记录的id
            var rows = $("#myTable").bootstrapTable("getSelections");
            c_ids = [];
            for (var i = 0; i < rows.length; i++) {
                c_ids[i] = rows[i].c_id;
            }

            showDeteleModel("确定要停售这" + rows.length + "款车吗");
        });


        function initTable() {
            $("#myTable").bootstrapTable("destroy");
            $("#myTable").bootstrapTable({
                url: "../../car/selectAll",
                method: 'GET', //请求方式（*）
                toolbar: '#tableToolBar',              //工具按钮用哪个容器
                striped: true, //是否显示行间隔色
                cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true, //是否显示分页（*）
                sortable: true, //是否启用排序
                sortOrder: "asc", //排序方式
                sidePagination: "client", //分页方式：client客户端分页，server服务端分页（*）
                pageNumber: 1, //初始化加载第一页，默认第一页,并记录
                pageSize: 10, //每页的记录行数（*）
                pageList: [10, 20, 50], //可供选择的每页的行数（*）
                search: true, //是否显示表格搜索,模糊查询
                strictSearch: false,//精确查询
                // silent : true,// 刷新事件必须设置
                showColumns: true, //是否显示所有的列（选择显示的列）
                showRefresh: true, //是否显示刷新按钮
                minimumCountColumns: 2, //最少允许的列数
                clickToSelect: true, //是否启用点击选中行
                //height: 1000,                      //表格高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                uniqueId: "c_id", //每一行的唯一标识，一般为主键列
                showToggle: true, //是否显示详细视图和列表视图的切换按钮
                cardView: false, //是否显示详细视图
                detailView: false, //是否显示父子表
                clickToSelect: true,    //是否启用点击选中行
                columns: [
                    {
                        checkbox: true,
                    },
                    {
                        field: 'c_name',//JSon数据中的相应的key
                        title: '车名',//表头信息
                        sortable: true,
                        width: 100,
                        align: 'center',
                        valign: 'middle',
                    },
                    {
                        field: 'c_displacement',
                        title: '排量',
                        sortable: true,
                        width: 100,
                        align: 'center',
                        valign: 'middle',
                    },
                    {
                        field: 'c_gearbox',
                        title: '变速箱',
                        sortable: true,
                        width: 100,
                        align: 'center',
                        valign: 'middle',
                    },
                    {
                        field: 'c_structure',
                        title: '车身结构',
                        sortable: true,
                        width: 100,
                        align: 'center',
                        valign: 'middle',
                    },
                    {
                        field: 'c_braking',
                        title: '制动方式',
                        sortable: true,
                        width: 100,
                        align: 'center',
                        valign: 'middle',
                    },
                    {
                        field: 'c_maxpower',
                        title: '最大功率',
                        sortable: true,
                        width: 100,
                        align: 'center',
                        valign: 'middle',
                    },
                    {
                        field: 'c_maxtorque',
                        title: '最大扭矩',
                        sortable: true,
                        width: 100,
                        align: 'center',
                        valign: 'middle',
                    },
                    {
                        field: 'c_maxhorsepower',
                        title: '最大马力',
                        sortable: true,
                        width: 100,
                        align: 'center',
                        valign: 'middle',
                    },
                    {
                        field: 'b_name',
                        title: '品牌',
                        sortable: true,
                        width: 100,
                        align: 'center',
                        valign: 'middle',
                    },
                    {
                        field: 'd_name',
                        title: '驱动方式',
                        sortable: true,
                        width: 100,
                        align: 'center',
                        valign: 'middle',
                    },
                    {
                        field: 'i_name',
                        title: '进气形式',
                        sortable: true,
                        width: 100,
                        align: 'center',
                        valign: 'middle',
                    },{
                        field: 't_name',
                        title: '级别',
                        sortable: true,
                        width: 100,
                        align: 'center',
                        valign: 'middle',
                    },

                    {
                        title:"操作",
                        width: 300,
                        align: 'center',
                        valign: 'middle',
                        // 如果要对按钮进行操作，并且需要获取点击的按钮对应的行内的数据，需要加：
                        events:operateEvents,
                        formatter:function (value,row,index) {
                            return "<button class='btn btn-primary btn-sm addInventory' ><i class='fa fa-pencil-square-o' aria-hidden='true'></i>添加库存</button>\n"
                        }
                    }

                ],
            });

        }

    });

window.operateEvents={
        'click .addInventory': function (e, value, row, index) {
            $(location).attr("href","/gotoInventory");
            sessionStorage.setItem("c_id",row.c_id)
        },
    };
</script>
</body>
</html>